<template>
  <div>
    <el-card class="box-card">
      <!-- 头部区域 -->
      <template #header>
        <div class="header">
          <span>学生信息管理</span>
        </div>
      </template>
      <!-- 搜索表单 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="学生姓名:" style="margin-right: 20px;">
          <el-input v-model="stuSearch.name" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="学号:">
          <el-input v-model="stuSearch.stuno" placeholder="学号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getStuInfo">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!--表格  -->
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="stuid" label="学生ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="stuno" label="学号">
        </el-table-column>
        <el-table-column prop="grade" label="年级">
        </el-table-column>
        <el-table-column prop="classname" label="班级">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话">
        </el-table-column>
        <el-table-column label="头像" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;"
              @click="previewavatar(scope.row.avatar)">
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="small" circle
              @click="handleDelete(scope.row.stuid)"></el-button>
          </template>

        </el-table-column>
        <template #empty>
          <el-empty description="没有数据" />
        </template>
      </el-table>
      <!-- 分页条 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="this.pageNum" :page-sizes="[2, 3, 5, 10]" :page-size=this.pageSize
          layout="total, sizes, prev, pager, next, jumper" :total=this.total>
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  data() {
    return {
      stuSearch: {
        name: '',
        stuno: ''
      },

      pageNum: 1,
      pageSize: 2,
      total: 10,
      tableData: [{
        stuid: '',
        name: '',
        stuno: '',
        grade: '',
        classname: '',
        phone: '',
        avatar: ''
      }]

    }
  },


  created() {
    this.getStuInfo()
  },


  methods: {
    // 删除
    handleDelete(id) {

      this.$confirm('是否删除这个学生信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        request.delete("/stu/studel", {
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code == '0') {
            this.$message.success("删除成功")
            this.getStuInfo()
          } else {
            this.$message.error("删除失败")
          }
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },


    //头像预览
    previewavatar(imageUrl) {
      window.open(imageUrl, '_blank');

    },

    //重置方法
    reset() {
      this.stuSearch.name = '',
        this.stuSearch.stuno = ''
    },

    //分页方法
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      console.log(pageSize)
      this.getStuInfo()
    },

    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.getStuInfo()
      console.log(pageNum)
    },

    //变色
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },

    //获取学生信息
    getStuInfo() {
      request.get("/stu/findAll", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.stuSearch.name,
          stuno: this.stuSearch.stuno
        }
      }).then(res => {
        if (res.data.code == '0') {
          console.log(res.data)
          this.$message.success("成功获取学生信息")
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.$message.error("获取学生信息失败")
        }
      }).catch(error => {
        console.log(new error("服务异常"))
        this.$message.error("服务异常")
      })
    }
  }
}






</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text {
  font-size: 20px;
}

.item {
  padding: 18px 0;
}

/* <!-- 学生信息列表 --> */
.el-table .warning-row {
  background: rgb(156, 136, 98);
}

.el-table .success-row {
  background: #f0f9eb;
}


.btn {
  display: flex;
  justify-content: center;
}
</style>